<template>
	<v-content full ref="content" background="#ffad01" padding-top="50" padding-bottom="150">
		<v-header back title="在线考试" background="#fff"></v-header>
		<div class="main">
			<div class="title">{{ message.examName }}</div>

			<div class="flag">
				<span>{{ message.score }}</span>
				<image
					class="image"
					v-if="message.score >= (message.qualifiedScore || 0)"
					src="/static/image/exam/result-success.png"
				></image>
				<image class="image" v-else src="/static/image/exam/result-fail.png"></image>
			</div>
			<div class="message">
				<div class="message-item">
					<div class="tip">答题用时</div>
					<div class="time">{{ timeConsuming }}分钟</div>
					<div class="tag">再接再厉</div>
				</div>
				<div class="message-item">
					<div class="tip">本试卷平均分</div>
					<div class="time">{{ message.averageScore || 0 }}</div>
					<div class="tag">{{ averageScore }}</div>
				</div>
			</div>
			<div
				class="answer"
				:class="[
					{
						noAnswer: !message.showAnswer,
					},
				]"
			>
				<answer-card ref="AnswerCardRef" type="answer" @on-click="onAnswerClick"></answer-card>
			</div>
		</div>
		<div class="footer">
			<div class="item" @click="onAnswerClick(1)" v-if="message.showAnswer">
				<image class="icon" src="/static/image/icon-form.png"></image>
				查看试卷
			</div>
			<div class="item" @click="onRefresh(1)" v-else>
				<image class="icon" src="/static/image/icon-form.png"></image>
				查看试卷
			</div>
		</div>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import answerCard from "./components/answer-card.vue"

export default {
	name: "exam-result",
	mixins: [mixins],
	data() {
		return {}
	},
	computed: {
		message() {
			return this.$store.state.exam.message
		},
		current: {
			get() {
				return this.$store.state.exam.current + 1
			},
			set(value) {
				this.$store.commit("exam/setCurrent", value - 1)
			},
		},
		timeConsuming() {
			return Math.ceil(this.message.timeConsuming / 60)
		},

		averageScore() {
			const score = this.message.averageScore - this.message.score
			if (score > 0) {
				return `低于平均分`
			} else if (score < 0) {
				return `高于平均分`
			} else {
				return "与平均分相同"
			}
		},
	},
	methods: {
		onshow() {
			this.getMessage()
		},
		getMessage() {
			this.$store.dispatch("exam/getExam", {
				id: this.query.id,
				type: "finish",
			})
		},
		onAnswerClick(index) {
			this.current = index
			this.toPage("/pages/exam/viewAnswer", { id: this.query.id })
		},
		onRefresh(index) {
			this.current = index
			this.toPage("/pages/exam/view", { id: this.query.id })
		},
	},
	components: {
		answerCard,
	},
}
</script>

<style lang="scss" scoped>
.main {
	margin: auto;
	background: #fff;
	border-radius: 20rpx;
	width: 635rpx;
	padding: 50rpx 35rpx;
	box-sizing: border-box;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		z-index: 2;
		width: 98rpx;
		height: 126rpx;
		background: url("@/static/image/exam/icon-pencil.png") no-repeat top center / contain;
		top: 355rpx;
		right: -46rpx;
	}
	.title {
		font-size: 38rpx;
		padding-bottom: 40rpx;
	}
	.flag {
		position: relative;
		font-size: 87rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		span {
			position: absolute;
			top: 26%;
			left: 27%;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3em;
		}
		.image {
			width: 400rpx;
			height: 325rpx;
		}
	}
	.message {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 40rpx;

		.message-item {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50%;
			.tip {
				padding-bottom: 20rpx;
				font-size: 25rpx;
				color: #898989;
			}
			.time {
				padding-bottom: 20rpx;
				font-size: 37rpx;
				color: #3f435a;
				font-weight: 700;
			}
			.tag {
				position: relative;
				line-height: 1.5;
				padding: 0px 30rpx;
				border-radius: 20rpx;
				background-color: #f0f2f1;
				color: #999999;
				font-size: 24rpx;
				&::before {
					position: absolute;
					top: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					content: "";
					display: inline-block;
					line-height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-bottom: 10rpx solid #f0f2f1;
				}
			}
			&:first-child {
				&::after {
					position: absolute;
					top: 20rpx;
					right: 0rpx;
					content: "";
					display: inline-block;
					width: 2rpx;
					height: 100rpx;
					background-color: #e9e9e9;
				}
			}
		}
	}
	.answer {
		&.noAnswer {
			pointer-events: none;
		}
	}
}
.footer {
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	width: 750rpx;
	height: 125rpx;
	background-color: #ffffff;
	.item {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #663527;
		font-size: 34rpx;
		&:first-child {
			padding-right: 89rpx;
			&::after {
				position: absolute;
				right: 0rpx;
				content: "";
				display: inline-block;
				width: 2rpx;
				height: 56rpx;
				background-color: #eee;
			}
		}
		&:last-child {
			padding-left: 89rpx;
			&::after {
				display: none;
			}
		}
		image {
			margin-right: 10rpx;
			width: 33rpx;
			height: 33rpx;
		}
	}
}
</style>
